<template>
  <div class="container">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="跟进记录" name="first">
          <header>
            <el-form :inline="true">
              <el-form-item label="学员信息">
                <el-input
                  placeholder="请输入学员姓名/手机号"
                  size="small"
                  v-model="query"
                ></el-input>
              </el-form-item>

              <el-form-item label="跟进时间">
                <el-date-picker
                  v-model="value2"
                  type="daterange"
                  unlink-panels
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  size="small"
                  style="width: 210px"
                />
              </el-form-item>

              <el-form-item label="跟进内容" v-if="flag">
                <el-input placeholder="请输入跟进内容" size="small"></el-input>
              </el-form-item>
              <el-form-item label="学员信息" v-if="flag">
                <el-input placeholder="请选择跟进人" label="跟进人" size="small">
                  <template #prefix>
                    <i class="iconfont icon-grid"></i>
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
            <el-form-item class="mtp-8">
              <el-button type="default">重置</el-button>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button class="more" @click="toggle">
                <span v-if="!flag">更多搜索</span>
                <span v-if="flag">收起搜索</span>
              </el-button>
            </el-form-item>
          </header>
          <div class="content">
            <el-button type="default" style="margin-bottom: 10px">今日待跟进</el-button>
            <el-table :data="newTabbleData" border style="width: 100%; fontsize: 12px">
              <el-table-column prop="student" label="学员" width="180" />
              <el-table-column prop="type" label="跟进类型" width="180" />
              <el-table-column prop="time2" label="跟进时间" width="180" />
              <el-table-column prop="nexttime2" label="下一次跟进时间" width="180" />
              <el-table-column prop="content" label="跟进内容" width="180">
                <template #scope>
                  <span style="color: #1890ff">{{ scope.row.content }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="uname" label="跟进人" width="180" />
              <el-table-column label="操作" width="180">
                <span style="color: #1890ff">编辑</span>
              </el-table-column>
            </el-table>
          </div>
          <div class="page-container">
            <el-button type="default" @click="exportToExcel"> 导出当前页</el-button>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="1"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length"
              background
            ></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref,onMounted } from "vue";
import * as XLSX from "xlsx";
//初始化tab栏数据
const activeName = ref("first");

//更多搜索切换逻辑
const flag = ref(false);

const toggle = () => {
  flag.value = !flag.value;
};
//更多搜索切换逻辑

//跟进日期
const value2 = ref("");

//table初始化数据
const tableData = ref([
  {
    student: "朵朵(000****1000)",
    type: "预约试听",
    time2: "2023-03-26 18:21",
    nexttime2: "2023-03-21",
    content: "[预约试听] 已预约试听课",
    uname: "曼儿田",
  },
  {
    student: "2222(000****1000)",
    type: "自定义",
    time2: "2023-03-21 00:33",
    nexttime2: "",
    content: "丢丢",
    uname: "新像素",
  },
  {
    student: "谭钟琳(137****0208)",
    type: "自定义",
    time2: "2023-03-19 22:06",
    nexttime2: "2023-03-20",
    content: "哈哈哈哈哈哈",
    uname: "新像素",
  },
  {
    student: "谭钟琳(137****0208)",
    type: "自定义",
    time2: "2023-03-19 22:06",
    nexttime2: "2023-03-20",
    content: "哈哈哈",
    uname: "张三",
  },
  {
    student: "谭钟琳(137****0208)",
    type: "自定义",
    time2: "2023-03-19 22:06",
    nexttime2: "",
    content: "哈哈哈哈哈哈",
    uname: "李四",
  },
  {
    student: "谭钟琳(137****0208)",
    type: "自定义",
    time2: "2023-03-19 22:06",
    nexttime2: "2023-03-20",
    content: "啦啦啦啦啦啦",
    uname: "王五",
  },
  {
    student: "2222(000****1000)",
    type: "自定义",
    time2: "2023-03-21 00:33",
    nexttime2: "",
    content: "丢丢",
    uname: "222",
  },
  {
    student: "2222(000****1000)",
    type: "自定义",
    time2: "2023-03-21 00:33",
    nexttime2: "",
    content: "丢丢",
    uname: "1111",
  },
]);

//分页逻辑

const handleSizeChange = (e) => {
  //当前显示条数
  
};

const handleCurrentChange = (e) => {
  //跳到第几页

};

//导出功能实现
const exportToExcel = () => {
  const worksheet = XLSX.utils.json_to_sheet(tableData.value);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  XLSX.writeFile(workbook, "tableData.xlsx");
};

//查询
const query = ref("");
const newTabbleData = ref([]);

onMounted(() => {
  newTabbleData.value = tableData.value;
});

const search = () => {
  newTabbleData.value = tableData.value.filter((item) => {
    return item.student.includes(query.value);
  });
  tableData.value = newTabbleData.value;
};


</script>

<style lang="scss" scoped>
.container {
  font-size: 13px;
}
.el-card {
  margin: 10px;
}
.el-input {
  width: 200px;
  line-height: 28px;
  height: 28px;
  font-size: 12px;
}
.el-col-6 {
  flex: 0 0 24%;
}
.more {
  border-color: transparent;
  color: #1890ff;
  background: transparent;
}

.content {
  margin: 10px;
}

.mtp-8 {
  margin-top: 8px;
}

table thead {
  color: #909399;
}

.page-container {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
</style>
